<template>
  <div>
    <nav-bar title="选择人员"></nav-bar>
    <div class="maxinBox">
     <!-- <form action="/">
        <van-search
          v-model="nickname"
          show-action
          placeholder="请输入联系人姓名"
          @search="onSearch"
        />
      </form> -->
      <div>
        <van-row v-for="(itemData, index) in personalList" :key="index" class="addressBook backgroundfff" style="padding: 0 0.9375rem;">
          <van-checkbox-group v-model="choosePersonal">
            <van-cell-group>
              <van-cell
                :key="index"
                clickable
                :title="itemData.userName"
                @click="toggle(index)"
              >
                <template #right-icon>
                  <van-checkbox :name="itemData" ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-row>
      </div>
    </div>
    <div class="center">
       <van-button style="width: 80%;" round type="info" @click="save">确定</van-button>
    </div>
  </div>
</template>

<script>
  import Bus from '../../../../utils/eventBus.js'
  import overtimePayManage from '../../../../api/workAPI/overtimePayManage.js'
  export default {
    data() {
      return {
        personalList: [],
        choosePersonal: [],
        // nickname: '',
        // choosePersonType: '',
      }
    },
    methods: {
      // // 关键字查询
      // onSearch(val) {
      // },
      // 负责人通讯录查询
      getPersonalList() {
        overtimePayManage.getChoosePersonal().then(res => {
          this.personalList = res
        })
      },
      // 多选选择
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      // 保存选择
      save() {
        this.$router.push({
          name: 'AddOvertimePay'
        })
      }
    },
    destroyed() {
      Bus.$emit('personList', {
        choosePersonal: this.choosePersonal
      })
    },
    mounted() {
      // this.choosePersonType = JSON.parse(JSON.stringify(this.$route.params.data))
      this.getPersonalList()
    }
  }
</script>

<style scoped lang="scss">
  .diff{
    padding-left: 3 * $spacing;
  }
  .organization{
    padding: 2 * $spacing;
    border-bottom: $border;
    text-align: right;
    background-color: $color;
    line-height: 2.5rem;
  }
</style>
